<template>
	<view>
		<view class="list">
			<view class="item" @click="getOrder(item.id)" v-for="item in addressList" :key="item.id">
				<view class="left">
					<view class="name">
						{{ item.province }} {{ item.county }}{{ item.city }}
						<van-tag type="danger" v-if="item.onsale !== 0" round>默认</van-tag>
					</view>
					<view class="name">{{ item.contacts }} {{ item.phone }}</view>
				</view>
				<view class="right" @click="modifyAdress(item.id)"><van-icon name="edit" size="20" /></view>
			</view>
		</view>
		<view class="submit-order">
			<van-goods-action><van-goods-action-button @click="clickAddress" text="添加地址" /></van-goods-action>
		</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { reqgetdzList } from '@/api/modules/address.js'
import { reactive, toRefs, computed } from 'vue'
import { GetAddress } from '@/store/address.js'
const getAddress = GetAddress()

const state = reactive({
	addressList: []
})

// 修改地址
const modifyAdress = id => {
	const index = state.addressList.findIndex(item => item.id === id)
	getAddress.address(state.addressList[index])
	uni.navigateTo({
		url: `/subpkg/add-address/add-address?id=${id}`
	})
}

//返回支付页
const getOrder = (id) => {
	const pages = getCurrentPages();
	const page = pages[pages.length -2].route
	if(page !== 'subpkg/place-order/place-order') return
	uni.navigateBack()
}

// 跳转地址列表页
const clickAddress = () => {
	uni.navigateTo({
		url: "/subpkg/add-address/add-address"
	})
}

// 初始化
const info = async () => {
	const { data } = await reqgetdzList()
	state.addressList = data.data
	if (data.code === 401) return
	state.addressList.forEach(item => {
		item.phone = item.phone.slice(0, 3) + '****' + item.phone.slice(7)
	})
}

// 页面加载
onLoad(async message => {
	info()
})

// 页面显示
onShow(() => {
	info()
})

// 页面隐藏
onHide(() => {})
const { addressList } = toRefs(state)
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
	padding: 0;
}
.list {
	.item {
		padding: 20rpx;
		display: flex;
		background-color: #fff;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding: 20rpx 30rpx;
		.left {
			.name {
				font-size: 32rpx;
				&:nth-child(2) {
					margin-top: 20rpx;
					font-size: 26rpx;
					color: #000;
				}
			}
		}
		.right {
			padding: 20rpx 0 20rpx 20rpx;
		}
	}
}
.submit-order {
	// position: fixed;
	// bottom: 10rpx;
	// left: 0;
	// right: 0;
	// width: 100%;
	// box-sizing: border-box;
	.van-button {
		width: 95%;
		height: 90rpx;
		border-radius: 8rpx;
		margin-left: 20rpx;
	}
}
</style>
